<div class="clr-row card-row mt-1">
  <span class="card-btn mr-5px" (click)="showCard(true)" (mouseenter)="mouseEnter('card') "
        (mouseleave)="mouseLeave('card')">
                        <clr-icon size="24" [ngClass]="{'is-highlight': isCardView || isHovering('card') }"
                                  shape="view-cards"></clr-icon>
                    </span>
    <span class="list-btn" (click)="showCard(false)" (mouseenter)="mouseEnter('list') "
          (mouseleave)="mouseLeave('list')">
                        <clr-icon size="24" [ngClass]="{'is-highlight': !isCardView || isHovering('list') }"
                                  shape="view-list"></clr-icon>
                    </span>
</div>



<div *ngIf="!summaryInformation" class="clr-row mt-2 center">
    <span class="spinner spinner-md"></span>
</div>

<ng-container *ngIf="!isCardView">
    <div *ngIf="summaryInformation">
        <div class="pt-05 flex" *ngIf="summaryInformation?.registry">
            <h4 class="mt-0 title-width">{{'PROJECT.PROXY_CACHE_ENDPOINT' | translate}}</h4>
            <ul class="list-unstyled">
                <li id="endpoint">{{summaryInformation?.registry?.name}}-{{summaryInformation?.registry?.url}}</li>
            </ul>
        </div>
        <div class="pt-05 flex">
            <h4 class="mt-0 title-width">{{'SUMMARY.PROJECT_REPOSITORY' | translate}}</h4>
            <ul class="list-unstyled">
                <li>{{summaryInformation?.repo_count ? summaryInformation?.repo_count : 0}}</li>
            </ul>
        </div>
        <div class="pt-05 flex" *ngIf="withHelmChart">
            <h4 class="mt-0 title-width">{{'SUMMARY.PROJECT_HELM_CHART' | translate}}</h4>
            <ul class="list-unstyled">
                <li>{{summaryInformation?.chart_count ? summaryInformation?.chart_count : 0}}</li>
            </ul>
        </div>
        <div *ngIf="showProjectMemberInfo" class="pt-05 flex">
            <h4 class="mt-0 title-width">{{'SUMMARY.PROJECT_MEMBER' | translate}}</h4>
            <ul class="list-unstyled">
                <li>{{ summaryInformation?.project_admin_count ? summaryInformation?.project_admin_count : 0 }} {{'SUMMARY.ADMIN' | translate}}</li>
                <li>{{ summaryInformation?.maintainer_count ? summaryInformation?.maintainer_count : 0 }} {{'SUMMARY.MAINTAINER' | translate}}</li>
                <li>{{ summaryInformation?.developer_count ? summaryInformation?.developer_count : 0 }} {{'SUMMARY.DEVELOPER' | translate}}</li>
                <li>{{ summaryInformation?.guest_count ? summaryInformation?.guest_count : 0 }} {{'SUMMARY.GUEST' | translate}}</li>
                <li>{{ summaryInformation?.limited_guest_count ? summaryInformation?.limited_guest_count : 0 }} {{'SUMMARY.LIMITED_GUEST' | translate}}</li>
            </ul>
        </div>
    </div>
</ng-container>

<ng-container *ngIf="isCardView && summaryInformation">
   <div class="container">
     <div class="card clickable" *ngIf="hasReadRepoPermission">
       <div class="card-header">
         <div>{{"PROJECT_DETAIL.REPOSITORIES" | translate}}</div>
         <div class="clr-row number">{{summaryInformation?.repo_count ? summaryInformation?.repo_count : 0}}</div>
         <div class="clr-row">
           <div class="clr-col-4 column">{{'REPOSITORY.NAME' | translate}}</div>
           <div class="clr-col-2 column">{{'REPOSITORY.ARTIFACTS_COUNT' | translate}}</div>
           <div class="clr-col-2 column">{{'REPOSITORY.PULL_COUNT' | translate}}</div>
           <div class="clr-col-4 column">{{'REPOSITORY.LAST_MODIFIED' | translate}}</div>
         </div>
       </div>
       <div class="card-block">
         <div class="clr-row" *ngFor="let item of  repos">
           <div class="clr-col-4 ellipsis">
             <a href="javascript:void(0)" (click)="goIntoRepo(item)">{{item.name}}</a>
           </div>
           <div class="clr-col-2">{{item.artifact_count?item.artifact_count:0}}</div>
           <div class="clr-col-2">{{item.pull_count?item.pull_count:0}}</div>
           <div class="clr-col-4 ellipsis">{{item.update_time | harborDatetime: 'short'}}</div>
         </div>
       </div>
       <div class="card-footer">
          <button class="btn btn-link" (click)="goToRepos()">{{'SUMMARY.SEE_ALL' | translate}}</button>
       </div>
     </div>
     <div class="card clickable" *ngIf="hasReadChartPermission">
       <div class="card-header">
         <div>{{"PROJECT_DETAIL.HELMCHART" | translate}}</div>
         <div class="clr-row number">{{summaryInformation?.chart_count ? summaryInformation?.chart_count : 0}}</div>
         <div class="clr-row">
           <div class="clr-col-4 column">{{'HELM_CHART.NAME' | translate}}</div>
           <div class="clr-col-2 column">{{'HELM_CHART.STATUS' | translate}}</div>
           <div class="clr-col-2 column">{{'HELM_CHART.CHARTVERSIONS' | translate}}</div>
           <div class="clr-col-4 column">{{'HELM_CHART.CREATED' | translate}}</div>
         </div>
       </div>
       <div class="card-block">
         <div class="clr-row" *ngFor="let chart of charts">
           <div class="clr-col-4 ellipsis chart-name">
               <img class="size-24 mr-5px" [src]="chart.icon ?chart.icon:chartDefaultIcon" (error)="getDefaultIcon(chart);" />
               <a href="javascript:void(0)" (click)="onChartClick(chart.name)">{{ chart.name }}</a>
           </div>
           <div class="clr-col-2">{{ getStatusString(chart) | translate }}</div>
           <div class="clr-col-2">{{ chart.total_versions }}</div>
           <div class="clr-col-4 ellipsis">{{ chart.created | harborDatetime: 'short' }}</div>
         </div>
       </div>
       <div class="card-footer">
         <button class="btn btn-link" (click)="goToCharts()">{{'SUMMARY.SEE_ALL' | translate}}</button>
       </div>
     </div>
     <div class="card clickable" *ngIf="showProjectMemberInfo">
       <div class="card-header no-underline">
         <div>{{"PROJECT_DETAIL.USERS" | translate}}</div>
         <div class="clr-row number">{{getTotalMembers()}}</div>
       </div>
       <div class="card-block">
           <div class="clr-row">
               <div class="clr-col-4 column">{{'SUMMARY.ADMIN' | translate}}</div>
               <div class="clr-col-8">{{ summaryInformation?.project_admin_count ? summaryInformation?.project_admin_count : 0 }}</div>
           </div>
           <div class="clr-row">
               <div class="clr-col-4 column">{{'SUMMARY.MAINTAINER' | translate}}</div>
               <div class="clr-col-8">{{ summaryInformation?.maintainer_count ? summaryInformation?.maintainer_count : 0 }}</div>
           </div>
           <div class="clr-row">
               <div class="clr-col-4 column">{{'SUMMARY.DEVELOPER' | translate}}</div>
               <div class="clr-col-8">{{ summaryInformation?.developer_count ? summaryInformation?.developer_count : 0 }}</div>
           </div>
           <div class="clr-row">
               <div class="clr-col-4 column">{{'SUMMARY.GUEST' | translate}}</div>
               <div class="clr-col-8">{{ summaryInformation?.guest_count ? summaryInformation?.guest_count : 0 }}</div>
           </div>
           <div class="clr-row">
               <div class="clr-col-4 column">{{'SUMMARY.LIMITED_GUEST' | translate}}</div>
               <div class="clr-col-8">{{ summaryInformation?.limited_guest_count ? summaryInformation?.limited_guest_count : 0 }}</div>
           </div>
       </div>
       <div class="card-footer">
           <button class="btn btn-link" (click)="goToMembers()">{{'SUMMARY.SEE_ALL' | translate}}</button>
       </div>
     </div>
   </div>
</ng-container>
